<template>
  <div class="business">
    <div class="subDetail">
      <div class="head">
        <div class="sub-title">
          <p class="icon"></p>
          离职原因
        </div>
      </div>
      <div style="width: 90%; margin: auto">
        <!-- <a-radio-group disabled>
          <a-radio value="A">公司原因 </a-radio>
          <a-radio value="B">个人原因 </a-radio>
        </a-radio-group> -->
        <div>公司原因</div>
        <a-textarea
          disabled
          style="height: 150px; margin-top: 20px"
          placeholder="请填写公司原因"
          allow-clear
        />
        <div>个人原因</div>
        <a-textarea
          disabled
          style="height: 150px; margin-top: 20px"
          placeholder="请填写个人原因"
          allow-clear
        />
      </div>
    </div>
    <div class="subDetail">
      <div class="head">
        <div class="sub-title">
          <p class="icon"></p>
          面谈问题记录
        </div>
        <div @click="visibleProblem = true" class="setting">
          <icon-bookmark style="margin-right: 5px" />引用离职问题库
        </div>
      </div>
      <div style="width: 90%; margin: auto">
        <a-table
          :scroll="{
            x: 200,
            y: 200
          }"
          :pagination="false"
          :bordered="TableBorder"
          :columns="columns"
          :data="props.problemData"
          stripe
        >
          <template #rowIndex="{ rowIndex }"> {{ rowIndex + 1 }} </template>
          <template #operation="{ record, rowIndex }">
            <a-tooltip content="编辑">
              <IconFont
                type="icon-edit"
                :size="26"
                :style="{
                  marginRight: '10px',
                  cursor: 'pointer'
                }"
                @click="goEdit(rowIndex, record.id)"
              />
            </a-tooltip>
            <a-tooltip content="删除" position="left">
              <a-popconfirm
                content="是否确认删除该条数据?(注意：无需按下面保存也会删除)"
                @ok="remove(rowIndex, record)"
              >
                <IconFont
                  type="icon-delete"
                  :size="26"
                  :style="{
                    marginRight: '10px',
                    cursor: 'pointer'
                  }"
                />
              </a-popconfirm>
            </a-tooltip>
          </template>
        </a-table>
        <div class="add-question">
          <a-button type="text" @click="visible = true">
            <template #icon>
              <icon-plus />
            </template>
            新增问题
          </a-button>
        </div>
      </div>
    </div>
    <div class="subDetail">
      <div class="head">
        <div class="sub-title">
          <p class="icon"></p>
          挽留可能性与措施
        </div>
      </div>
      <div style="width: 90%; margin: auto">
        <div class="main">
          <div class="left">
            <div>挽留可能性</div>
            <div style="height: 100px; line-height: 100px">建议挽留措施</div>
          </div>
          <div class="right">
            <div>
              <a-radio-group disabled>
                <a-radio>非常大</a-radio>
                <a-radio>较大</a-radio>
                <a-radio>一般</a-radio>
                <a-radio>较小</a-radio>
                <a-radio>很小</a-radio>
              </a-radio-group>
            </div>
            <div style="height: 100px"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="subDetail">
      <div class="head">
        <div class="sub-title">
          <p class="icon"></p>
          员工对公司的建议
        </div>
      </div>
      <div style="width: 90%; margin: auto">
        <a-textarea
          disabled
          style="height: 150px; margin-top: 20px"
          placeholder="Please enter something"
          allow-clear
        />
      </div>
    </div>
    <div class="subDetail">
      <div class="head">
        <div class="sub-title">
          <p class="icon"></p>
          面谈总结
        </div>
      </div>
      <div style="width: 90%; margin: auto">
        <a-textarea
          disabled
          style="height: 150px; margin-top: 20px"
          placeholder="Please enter something"
          allow-clear
        />
      </div>
    </div>
  </div>
  <a-modal
    title="新增问题"
    v-model:visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form :model="form">
      <a-form-item
        field="problem"
        label="问题"
        validate-trigger="input"
        required
      >
        <a-input v-model="form.problem" placeholder="请输入" />
      </a-form-item>
      <a-form-item field="reply" label="答复" validate-trigger="input">
        <a-textarea
          disabled
          v-model="form.reply"
          placeholder="请输入"
          allow-clear
        />
      </a-form-item>
    </a-form>
  </a-modal>
  <a-drawer
    title="离职问题库"
    :width="500"
    :visible="visibleProblem"
    @ok="problemOk"
    @cancel="visibleProblem = false"
    unmountOnClose
  >
    <a-tabs lazy-load v-model="key" @change="tabChange($event as number)">
      <a-tab-pane :key="1" title="审核中问题集">
        <div>
          <a-input-search
            :style="{ width: '320px' }"
            placeholder="请输入离职问题"
            search-button
            v-model="searchVal"
            @search="onSearch"
            @press-enter="onSearch"
          >
            <template #button-icon>
              <icon-search />
            </template>
          </a-input-search>
        </div>
        <TableTurn
          ref="tableRef1"
          :tableData="getData1"
          style="margin-top: 20px"
          :args="args"
        >
          <a-table-column :width="80">
            <template #title> 序号 </template>
            <template #cell="{ rowIndex }">
              {{ rowIndex + 1 }}
            </template>
          </a-table-column>
          <a-table-column
            :width="200"
            title="离职问题"
            data-index="question"
          ></a-table-column>
          <a-table-column
            :width="200"
            title="描述"
            data-index="remark"
          ></a-table-column>
        </TableTurn>
      </a-tab-pane>
      <a-tab-pane :key="2" title="审核后问题集">
        <div>
          <a-input-search
            :style="{ width: '320px' }"
            placeholder="请输入离职问题"
            search-button
            v-model="searchVal"
            @search="onSearch"
            @press-enter="onSearch"
          >
            <template #button-icon>
              <icon-search />
            </template>
          </a-input-search>
        </div>
        <TableTurn
          ref="tableRef2"
          :tableData="getData2"
          style="margin-top: 20px"
          :args="args"
        >
          <a-table-column :width="80">
            <template #title> 序号 </template>
            <template #cell="{ rowIndex }">
              {{ rowIndex + 1 }}
            </template>
          </a-table-column>
          <a-table-column
            :width="200"
            title="离职问题"
            data-index="question"
          ></a-table-column>
          <a-table-column
            :width="200"
            title="描述"
            data-index="remark"
          ></a-table-column>
        </TableTurn>
      </a-tab-pane>
    </a-tabs>
  </a-drawer>
</template>
<script setup lang="ts">
import {
  GetLeaveProblemList,
  GetLeaveProblemDetail,
  PostLeaveProblemList,
  DelLeaveProblemList,
  PutLeaveProblemList
} from '@/apis/management/human/baseSetting/leaveSetting';
import { Message } from '@arco-design/web-vue';
import clonedeep from 'lodash.clonedeep';
const props = withDefaults(
  // 参数说明
  defineProps<{
    problemData?: any; // 表格数据
  }>(),
  { problemData: () => [] }
);
const visible = ref(false);
const visibleProblem = ref(false);
const form = reactive({
  index: 0,
  // id: 0,
  problem: '',
  reply: ''
});
const key = ref(1);
let tableRef1 = ref(); // 储存表格的ref
let tableRef2 = ref(); // 储存表格的ref
const TableBorder = {
  wrapper: true,
  cell: true,
  headerCell: true,
  bodyCell: true
};
// 表格配置
const args = reactive({
  rowSelection: {
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false
  }
});
const columns: any = [
  {
    title: '序号',
    dataIndex: 'index',
    align: 'center',
    slotName: 'rowIndex'
  },
  {
    title: '问题',
    dataIndex: 'problem',
    align: 'center'
  },
  {
    title: '答复',
    dataIndex: 'reply',
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    align: 'center',
    slotName: 'operation'
  }
];
// const data = reactive<{ problem?: string; reply?: string; id?: number }[]>([]);
const searchVal = ref('');

const onSearch = () => {
  if (key.value === 1) {
    tableRef1.value.loadData();
  } else {
    tableRef2.value.loadData();
  }
};
// 获取审核中表格数据
const getData1 = async (pageData: any) => {
  try {
    const res = await GetLeaveProblemList({
      ...pageData,
      scopeApply: 1,
      problem: searchVal.value
    });
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};

// 获取审核后表格数据
const getData2 = async (pageData: any) => {
  try {
    const res = await GetLeaveProblemList({
      ...pageData,
      scopeApply: 2,
      problem: searchVal.value
    });
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};

const tabChange = (e: number) => {
  key.value = e;
  searchVal.value = '';
};

const remove = (index: number, oldData?: any) => {
  if (oldData.required === 1) {
    return Message.error('默认模板无法删除');
  }
  emit('upData', clonedeep({ type: 3, data: { index, id: oldData.id } }));
  // data.splice(index, 1);
};
const goEdit = (index: number, id?: number) => {
  form.problem = props.problemData[index].problem as string;
  form.index = index + 1;
  visible.value = true;
};
const problemOk = () => {
  const data: any = [];
  if (tableRef1.value.selectedListData.length) {
    tableRef1.value.selectedListData.forEach((ele: any) => {
      data.push({ problem: ele.problem, reply: '' });
    });
  }
  if (tableRef2.value.selectedListData.length) {
    tableRef2.value.selectedListData.forEach((ele: any) => {
      data.push({ problem: ele.problem, reply: '' });
    });
  }
  emit('upData', clonedeep({ type: 1, data }));
  visibleProblem.value = false;
};
const handleOk = () => {
  console.log('form.id', form);

  emit('upData', clonedeep({ type: 2, data: clonedeep(form) }));
  console.log('form', clonedeep(form));
  form.index = 0;
  form.problem = '';
};

const handleCancel = () => {
  console.log('====================================');
  console.log(props.problemData);
  console.log('====================================');
  // form.id = 0;
  form.problem = '';
};
watch(
  () => props.problemData,
  (val) => {
    console.log('val', val);
  }
);
const emit = defineEmits(['upData']);
</script>
<style lang="less" scoped>
.business {
  width: 90%;
  // height: 100%;
  // overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
  margin-bottom: 20px;
  .subDetail {
    width: 100%;
    .head {
      box-sizing: border-box;
      border-radius: 4px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding: 10px;
      background-color: #e8f0ff;
      margin: 20px 0;
      .sub-title {
        display: flex;
        align-items: center;
        .icon {
          border-radius: 4px;
          width: 6px;
          height: 70%;
          background-color: #3d7eff;
          height: 20px;
          padding: 0;
          margin: 3px 0;
          margin-right: 10px;
        }
      }
      .setting {
        color: #3d7eff;
        cursor: pointer;
      }
    }
    .add-question {
      background-color: #fff;
      border: 1px solid #eee;
      color: #3d7eff;
      padding: 10px;
      text-align: center;
    }
  }
}
:deep(.arco-table-pagination) {
  display: none;
}
.main {
  display: flex;

  .left {
    flex: 1;
    div {
      text-align: center;
      line-height: 50px;
      width: 100%;
      height: 50px;
      border: 1px solid #e4e4e4;
    }
  }
  .right {
    flex: 4;
    div {
      padding-left: 20px;
      line-height: 50px;
      width: 100%;
      height: 50px;
      border: 1px solid #e4e4e4;
    }
  }
}
</style>
